import { Suspense } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Sider from './components/Sider/index'
import { routesData } from './routes'
import { AllPages } from './pages'

import './App.css'

function App() {
  return (
    <div className="App">
      <Router>
        <Sider />
        <div className="content">
          <Suspense fallback={<h3>loading...</h3>}>
            <Switch>
              {routesData.map(({ path, title, component }) => (
                <Route
                  exact
                  key={path}
                  path={path}
                  render={props => {
                    const Component = AllPages[component]
                    document.title = title
                    return <Component {...props} />
                  }}
                />
              ))}
            </Switch>
          </Suspense>
        </div>
      </Router>
    </div>
  )
}

export default App
